<script setup lang="ts">
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';
import { showToast, Icon, BackTop } from 'vant';

import { getData, delItem } from '@/api/chart';


//数据渲染
interface iPro {
  createTime: string
  proid: string
  proimage: string
  proname: string
}
const list: Ref<iPro[]> = ref([])
onMounted(() => {
  getData().then(res => {
    // console.log(res.data.data);
    list.value = res.data.data
    // console.log(list.value);

  })
})

//输入框
const value = ref('');
const onSearch = (val: any) => showToast(val);
const onCancel = () => showToast('取消');


//记录当前滚东距离
// const scrollTopNum: Ref<number> = ref(0)
// //获取页面滚动距离
// function scrollTop(event: any) {
//   console.log(event.target.scrollTop);
//   scrollTopNum.value = event.target.scrollTop
// }
// const content = ref()
// //回到顶部点击事件
// function backTop() {
//   content.value.scrollTop = 0
// }



//删除单个==============================
// function delClick(item: iPro) {
//   delItem(item).then(res => {
//     // console.log(res);
//     list({ page: 0 }).then(res => {
//       // console.log(res);
//       list.value = res
//     })
//   })
// }


</script>

<template>
  <!-- 导航栏 -->
  <van-nav-bar title="消息中心" left-arrow />

  <!-- 搜索框 -->
  <form action="/">
    <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
  </form>

  <!-- 全选删除 -->
  <!-- <div class="del">
        <van-button type="primary" @click="allChoose">全选</van-button>
        <van-button type="primary">删除</van-button>
      </div> -->



  <!-- 联系人列表 -->
  <div size='large' v-for="item in list" :key="item.proid">

    <div class="bigbox">
      <!-- 选择按钮 -->
      <!-- <van-checkbox v-model="checked" @click="swi = !swi"></van-checkbox> -->

      <div class="left">
        <img :src="item.proimage" alt="">
      </div>
      <div class="content" @click="$router.push('/chart/chartmsg')">
        <p class="top">
          <span class="custom-title">{{ item.proname }}</span>
          <span class="custom-title"> {{ item.createTime }} </span>
        </p>

        <p id="com">
          {{ item.proid }}
          <!-- <van-button type="default" @click="delClick(item)">删除</van-button> -->
        </p>

      </div>

      <!-- 回到顶部 -->
      <!-- <div class="backTop" ref="content" @click="backTop" v-show="scrollTopNum > 10">
                      <van-icon name="back-top" size="30" />
                    </div> -->

    </div>
  </div>
</template>

<style lang="scss" scoped>
.van-nav-bar {
  background-color: blue;
  font-weight: 900;
}

.bigbox {
  display: flex;
  border: 1px solid yellow;
  overflow: auto;

  .left {
    float: left;
    margin-right: 10px;
    margin-bottom: 20px;

    img {
      margin-left: 5px;
      margin-top: 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }

  .content {
    float: right;
    flex: 1;
    overflow: auto;

    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      overflow: auto;
    }
  }
}

#com {
  display: flex;
  justify-content: space-between;
}

.backTop {
  position: fixed;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid #f66;
  right: 15px;
  bottom: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
